<template>
  <page-header-wrapper
    :tab-list="tabList"
    :tab-active-key="tabActiveKey"
    :tab-change="handleTabChange"
  >
    <template v-slot:title>
      <div class="title" />
    </template>

    <router-view />
  </page-header-wrapper>
</template>

<script>
const BASE_URL = '/index/user/details'

export default {
  name: 'Examine',
  data () {
    return {
      tabList: [
        { key: '1', tab: '基本信息' },
        { key: '2', tab: '借贷记录' },
        { key: '3', tab: '风险报告' },
      ],
      tabActiveKey: '1',
      search: true,
    }
  },

  computed: {
    // route url
    routerPath () {
      return `${BASE_URL}/${this.uid}`
    },

    // number
    uid () {
      return this.$route.params.uid
    },
  },

  created () {
    this.tabActiveKey = this.getActiveKey(this.$route.path)

    this.$watch('$route', (val) => {
      this.tabActiveKey = this.getActiveKey(val.path)
    })
  },
  methods: {
    getActiveKey (path) {
      switch (path) {
        case `${this.routerPath}/user`:
          return '1'
        case `${this.routerPath}/loan`:
          return '2'
        case `${this.routerPath}/risk`:
          return '3'
      }
    },

    handleTabChange (key) {
      this.tabActiveKey = key
      switch (key) {
        case '1':
          this.$router.push({
            name: 'RegisterUserDetailsContent',
            params: {
              uid: this.uid,
            },
          })
          break
        case '2':
          this.$router.push({
            name: 'RegisterUserDetailsLoan',
            params: {
              uid: this.uid,
            },
          })
          break
        default:
          this.$router.push({
            name: 'RegisterUserDetailsRisk',
            params: {
              uid: this.uid,
            },
          })
      }
    },
  },
}
</script>

<style lang="less" scoped>

</style>
